<template>
	<div>
		<el-container>
			<head-top v-show="!this.serviceId"></head-top>
			<el-header>
				<el-form :inline="true" :model="formInline" @submit.native.prevent class="form-inline form-menu-list">
					<el-form-item>
						<el-input v-model="formInline.title" placeholder="请输入查询内容" @keyup.enter.native="onSearch"></el-input>
					</el-form-item>

					<el-input v-model="formInline.wikicontent" placeholder="主机名称" @keyup.enter.native="onSearch" v-show="false"></el-input>




					<el-form-item>
						<el-button type="primary" @click="onSearch">查询</el-button>
					</el-form-item>
				</el-form>
				<el-form :inline="true" class="form-inline form-menu-function">
					<el-button type="primary" icon="el-icon-edit" @click="createdata" v-show="!serviceId">新增</el-button>
				</el-form>
			</el-header>

			<el-main>
				<el-table :data="tableData" :row-class-name="tableRowClassName">

					<el-table-column prop="id" label="序号" width="80">
					</el-table-column>
					<el-table-column prop="title" label="标题" :width="tableWidth">
					</el-table-column>
					<el-table-column label="操 作" width="450">
						<template slot-scope="scope">
							<!--icon="el-icon-edit" @click="handleView(scope.$index, scope.row)" -->
							
								<router-link target="_blank" :to="{path:'wiki/view/'+scope.row.id}" style="color: white;" id="wikiview" name="wikiview">
							<el-button size="medium" type="info" icon="el-icon-document">
								查看
								
							</el-button>
							</router-link>
							
							<el-button v-show="serviceId" size="medium" type="danger" icon="el-icon-edit" @click="unrelatedHandler(scope.$index, scope.row)">取消关联</el-button>
							<el-button v-show="!serviceId" size="medium" type="info" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
							<el-button v-show="!serviceId" size="medium" type="danger" icon="el-icon-delete" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
				<div class="block">
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
					 :page-sizes="[10, 30, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="count">
					</el-pagination>
				</div>

			</el-main>
			<el-dialog :title="title" :visible.sync="dialogFormVisible" :modal="false" :close-on-click-modal="clickModal" :close-on-press-escape="pressEscape" v-dialogDrag>
				<el-form :model="dialogform">
					<el-form-item label="标题" prop="title">
						<el-input v-model="dialogform.title" autocomplete="off"></el-input>
					</el-form-item>
					<!-- <quill-edit :quillcontent.sync="dialogform.wikicontent" v-if="dialogFormVisible"></quill-edit> -->
					<!-- <ckeditor :editor="editor" v-model="editorData" :config="editorConfig" id="editor" @ready="onReady"></ckeditor> -->
					<!-- <ckeditor id="editor"></ckeditor> -->
					<!-- <textarea id="editor"></textarea> -->
					<!-- <quill-edit v-model="dialogform.wikicontent" v-if="dialogFormVisible"></quill-edit> -->
					<!-- <quill-edit :quillcontent.sync="dialogform.wikicontent" v-if="dialogFormVisible"></quill-edit> -->
					<ck-edit :content.sync="dialogform.wikicontent"  v-if="dialogFormVisible"></ck-edit>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible = false" v-show="!isView">取 消</el-button>
					<el-button type="primary" @click="dialogFormsubmit" v-show="!isView">确 定</el-button>
					<el-button type="primary" @click="closedialog" v-show="isView">关 闭</el-button>
				</div>
			</el-dialog>
		</el-container>
	</div>
</template>

<script>
	import Vue from 'vue'
	import ckEdit from '@/components/ckEdit'
	import headTop from '@/components/headTop'
	
	// import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
	// import * as editorTools from '@/utils/myUploadAdapter';
	// import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder';
	import {
		search,
		update,
		del,
		unrelated
	} from '@/api/wiki.js'
	// new MyUploadAdapter();
	
	export default {
		// el: '#app',
		props: {
			'serviceId': Number,
			'appType': String,
		},
		data() {
			return {
				formInline: {
					appid: this.serviceId,
					apptype: this.appType,
				},
				dialogform: {
					wikicontent: "",
					title: "",
				},
				title: "知识库",
				dialogFormVisible: false,
				formLabelWidth: "20",
				tableWidth: 1200,
				count: 0,
				currentPage: 1,
				pageSize: 10,
				tableData: [],
				rules: {

				},
				
				isView: false,
				clickModal: false,
				pressEscape: false,
				editor: null,
				// editor: ClassicEditor,
				editorData: '',
				editorConfig: {
					// The configuration of the editor.
					// toolbar: ['heading', 'fontSize', 'highlight', 'highlight: yellowMarker', 'highlight: greenMarker',
					// 	'highlight:pinkMarker', 'highlight: blueMarker', 'fontFamily', 'alignment', 'imageUpload', 'bold', 'italic',
					// 	'underline', 'imageStyle: full ', 'imageStyle: alignLeft ', 'imageStyle: alignRight ', 'link ', 'undo ', 'redo '
					// ],
					// fontSize: {
					// 	options: [8, 9, 10, 11, 12, 'default ', 14, 16, 18, 20, 22, 24, 26, 28, 36, 44, 48, 72
					// 	],
					// },
					toolbar: ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', ],
					heading: {
						options: [{
								model: 'paragraph',
								title: 'Paragraph',
								class: 'ck-heading_paragraph'
							},
							{
								model: 'heading1',
								view: 'h1',
								title: 'Heading 1',
								class: 'ck-heading_heading1'
							},
							{
								model: 'heading2',
								view: 'h2',
								title: 'Heading 2',
								class: 'ck-heading_heading2'
							}
						]
					},
					image: {
						toolbar: [
							'imageStyle:full',
							'imageStyle:side',
							'|',
							'imageTextAlternative'
						]
					}
				},


			}
		},
		methods: {
			dialogFormsubmit() {
				this.$confirm('是否提交?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
				update(this.dialogform)
					.then((response) => {
						this.dialogFormVisible = false;
						this.dialogform = {};
						this.onSearch();
					})
					})
			},
			async onSearch() {
				console.log("this.formInline: " + this.formInline);
				await search(this.formInline, this.pageSize, this.currentPage)
					.then((response) => {
						this.inittable(response)
					})
			},
			inittable(response) {
				this.tableData = response.items;
				this.count = response.totalNum;
			},
			createdata() {
				this.dialogform = {
					wikicontent: "",
				};
				this.dialogFormVisible = true;
				
				
			},
			tableRowClassName({
				row,
				rowIndex
			}) {
				if (row.status == 1) {
					return 'warning-row';
				} else if (row.status == 0) {
					return 'success-row';
				}
				return '';
			},
			handleSizeChange(val) {
				this.pageSize = val;
				this.onSearch();
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				this.onSearch();
			},
			handleView(index, row) {
				// this.dialogform = Object.assign({}, row);
				// this.dialogFormVisible = true;
				// this.isView = true;
				const url_open = this.$router.resolve({name: '/wiki/view/'+row.id})
				window.open(url_open.href,'_blank')
				
			
			},
			handleEdit(index, row) {
				this.dialogform = Object.assign({}, row);
				this.dialogFormVisible = true

			},
			handleDelete(index, row) {
				this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					del(row)
						.then((response => {
							this.$message({
								type: 'success',
								message: '删除成功!'
							});
							this.onSearch();
						}))
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});

			},
			closedialog(){
				this.dialogFormVisible = false;
				this.isView = false;
			},
			unrelatedHandler(index,row){
				this.$confirm('是否取消关联次记录?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let data = {
						id: row.id
					}
					unrelated(data,this.serviceId,this.appType)
						.then((response => {
							if(response.code == "200"){
								this.$message({
									type: 'success',
									message: '操作成功!'
								});
								this.onSearch();
							}
							
						}))
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '操作已取消'
					});
				});
				
			},
			// onReady(editor) {
			// 	editorTools.MyCustomUploadAdapterPlugin(editor)
			// },

		},
		created() {

			this.onSearch();
			
			// this.init();
		},
		mounted(){
			if(this.serviceId){
				this.clickModal=true;
				this.pressEscape=true;
				this.tableWidth = 550;
				this.isView=true;
			}
			
		},
		components: {
			headTop,
			ckEdit,
		},
	}
</script>

<style>
	.ck-editor__editable {
		min-height: 200px;
	}
</style>
